<!doctype html>
<!--[if lt IE 7]>
<html class="lt-ie9 lt-ie8 lt-ie7" lang="en-US"> <![endif]-->
<!--[if IE 7]>
<html class="lt-ie9 lt-ie8" lang="en-US"> <![endif]-->
<!--[if IE 8]>
<html class="lt-ie9" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en-US"> <!--<![endif]-->
<head>
    <!-- META TAGS -->
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Future Technology</title>

    <link rel="shortcut icon" href="/static/index/images/favicon.png"/>

    <!-- Style Sheet-->

    <link rel="stylesheet" href="/static/index/css/font-awesome.css">

    <!--<link rel="stylesheet" href="/static/index/style.css"/>-->
    <link rel="stylesheet" href="/static/index/css/style.css" type="text/css" media="all"/>
    <link rel='stylesheet' id='bootstrap-css-css' href='/static/index/css/bootstrap5152.css?ver=1.0' type='text/css'
          media='all'/>
    <link rel='stylesheet' id='responsive-css-css' href='/static/index/css/responsive5152.css?ver=1.0' type='text/css'
          media='all'/>
    <link rel='stylesheet' id='pretty-photo-css-css' href='/static/index/js/prettyphoto/prettyPhotoaeb9.css?ver=3.1.4'
          type='text/css' media='all'/>

    <link rel='stylesheet' id='custom-css-css' href='/static/index/css/custom5152.html?ver=1.0' type='text/css'
          media='all'/>
    <link rel="stylesheet" href="/static/index/css/tap.css">
    <link rel='stylesheet' id='main-css-css' href='/static/index/css/main5152.css?ver=1.0' type='text/css' media='all'/>
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="js/html5.js"></script>
    <![endif]-->
    {js href="/static/index/js/jquery.min.js"}
    <!--{css href="/static/admin/assets/libs/bootstrap/css/bootstrap.min.css"}-->
    {js href="/static/admin/assets/libs/bootstrap/js/bootstrap.min.js"}
</head>

<body>
<!-- Start of Header -->
<div class="header-wrapper">
    <header>
        <div class="container">

            <div class="logo-container">
                <!-- Website Logo -->
                <a href="{:url('/')}">
                    <img src="/static/index/images/logo.png" alt="Acquisition">
                </a>

            </div>
            <!-- Start of Main Navigation -->
            {block name="navigation"}
            <nav class="main-nav">
                <div class="menu-top-menu-container">
                    <ul id="menu-top-menu" class="clearfix">
                        <li class="current-menu-item"><a href="{:url('index/index/index')}">首页</a></li>
                        <li><a href="{:url('index/Recall/index')}">韶华追忆</a></li>
                        <li><a href="{:url('index/Mood/index')}">心情随笔</a></li>
                        <li><a href="{:url('index/Share/index')}">技术分享</a></li>
                        <li><a href="{:url('index/Post/index')}">技术讨论</a></li>
                         <!--<li><a href="{:url('index/Archive/index')}">个人归档</a></li>-->
                        <li><a href="{:url('/index/Me/index')}">关于我</a></li>
                    </ul>
                </div>
            </nav>
            {/block}
            <!-- End of Main Navigation -->

        </div>
    </header>
</div>
<!-- End of Header -->
<!-- 个人中心模态框 -->
<div id="right-panel" class="panel">
    <div class="demo">
        <div class="container-fluid">
            <div class="col-md-12 col-sm-12 col-xs-12" style="padding-left: 0;">
                <div class="col-md-11 col-sm-11 col-xs-10" style="padding-right:0;  z-index: 9999;">
                    <div class="col-md-2 col-sm-3 col-xs-3">
                        <div id="div1"><img src="/static/userhead/{$userpic == null ? 'default-header.jpg' : $userpic}"
                                            id="avatar" tapmode onclick="getPicture()" style="cursor: hand"/></div>
                        <form method="post" enctype="multipart/form-data" id="my-header"
                              action="{:url('index/index/server')}" style="display: none;">
                            <input type="file" name="photo" onchange="setImage(this,div1,avatar);" id="photo"/>
                        </form>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-6">
                        <p class="user-name">
                            <span class="caname" name="username">{$username == null ? 'username' : $username}</span>
                            <a href="#" class="glyphicon glyphicon-edit ftsize" id="useredit" style="color: #999;"></a>
                        </p>
                    </div>
                    <div class="col-md-2 col-sm-5 col-xs-5">
                        <p class="user-info">
                            <span class="casex">{$age == null ? '90'.'后' : $age.'后'}:{$sex == 0 ? '女' : '男'}</span>
                            <!--<a href="#" class="glyphicon glyphicon-edit" id="userage" style="color: #999;"></a>-->
                        </p>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-4">
                        <span class="glyphicon glyphicon-leaf leaf"></span>
                        <span class="jifen">{$integral == null ? '0' : $integral}</span>
                    </div>
                </div>
                <div>
                    <a class="glyphicon glyphicon-remove" id="close-panel-bt" href="#" style="color: #999;"></a>
                </div>
                <div class="tab" role="tabpanel">
                    <!-- Nav tabs -->
                    <ul class="nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">评论</a></li>
                        <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">帖子</a></li>
                        <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">换绑</a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content tabs">
                        <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                            {volist name="list" id="v"}

                            <div class="talk">
                                <div class="col-md-1 col-sm-2 col-xs-2 img-box" style="padding: 0;">
                                    <img src="/static/userhead/{$userpic == null ? 'default-header.jpg' : $userpic}">
                                </div>
                                <div class="col-md-9 col-sm-9 col-xs-8">
                                    <div class="col-md-12 col-sm-12 col-xs-12" style="margin-bottom: 6px;">
                                        <div class="col-md-9 col-sm-8 col-xs-8 postuser">{$username}</div>
                                        <div class="col-md-2 col-sm-2 col-xs-2" style="padding: 0;">
                                            <a href="#" data-id="{$v.artcom_id}" class="glyphicon glyphicon-trash delete" style="color: #999; float: right;"></a>
                                        </div>
                                    </div>
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        {$v.artcontent}
                                    </div>
                                </div>
                                <div class="col-md-12 col-sm-12 col-xs-12"
                                     style="margin:5px 0 8px 0; border-bottom: 1px dashed gray; padding: 0 0 10px 0;">
                                    <span class="col-md-9 col-sm-7 col-xs-5">未来博客</span>
                                    <span style="color:gray; float: right;">{$v.artcomtime}</span>
                                </div>
                            </div>
                            {/volist}
                        </div>

                        <div role="tabpanel" class="tab-pane fade" id="Section2">
                            {volist name="posts" id="vo"}
                            <div class="posts">
                                <div class="col-md-1 col-sm-2 col-xs-2 img-box" style="padding: 0;">
                                    <img src="/static/userhead/{$userpic == null ? 'default-header.jpg' : $userpic}">
                                </div>
                                <div class="col-md-9 col-sm-9 col-xs-9">
                                    <div class="col-md-12 col-sm-12 col-xs-12" style="margin-bottom: 6px;">
                                        <div class="col-md-9 col-sm-8 col-xs-8 postuser">{$username}</div>
                                        <div class="col-md-2 col-sm-2 col-xs-2" style="padding: 0;">
                                            <a href="#" data-id="{$vo.post_id}" class="glyphicon glyphicon-trash delposts" style="color: #999; float: right;"></a>
                                        </div>
                                    </div>
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        {$vo.postname}
                                    </div>
                                </div>
                                <div class="col-md-12 col-sm-12 col-xs-12" style="margin:5px 0 8px 0; border-bottom: 1px dashed gray;  padding: 0 0 10px 0;">
                                    <span class="col-md-9 col-sm-7 col-xs-5">未来博客</span>
                                    <span style="color:gray; float: right;">{$vo.posttime}</span>
                                </div>
                            </div>
                            {/volist}
                        </div>

                        <div role="tabpanel" class="tab-pane fade" id="Section3">
                            <div class="header-bottom">
                                <div class="header-right w3agile">
                                    <div class="header-left-bottom agileinfo">
                                        <form action="{:url('index/index/edit')}" method="post" name="regForm"
                                              style="margin: 0 auto;">
                                            <div class="icon1" id="usertel">
                                                电话：<input type="tel" placeholder="Phone number" name="tel" value="{$tel}" style="color: #000;"/>
                                            </div>
                                            <div class="icon1" id="useremial">
                                                邮箱：<input type="email" placeholder="QQE-mail" name="email" id="emial" value="{$email}" style="color: #000;"/>
                                            </div>
                                            <div class="bottom">
                                                <input type="submit" value="修改" id="submit"/>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 个人中心模态框结束 -->

<!-- Start of Search Wrapper -->
<div class="search-area-wrapper">
    <div class="search-area container">
        <h3 class="search-header">Search</h3>
        <p class="search-tag-line">请搜索你的内容！</p>

        <form id="search-form" class="search-form clearfix" method="post" action="{:url('index/Search/index')}" >
            <input class="search-term required" type="text" id="artname" name="artname"/>
            <input class="search-btn" type="submit" value="Search" />

            <div id="search-error-container"></div>
        </form>
    </div>
</div>
<!-- End of Search Wrapper -->
<div class="copyrights">Collect from</div>

<!-- Start of Page Container -->
{block name="indexmain"}
<div class="page-container">
    <div class="container">
        <div class="row">

            <!-- start of page content -->
            <div class="span8 page-content">

                <!-- Basic Home Page Template -->
                <div class="row separator">
                    <section class="span8 articles-list" style="margin-top: 30px;">
                        <h3>精选文章</h3>
                        <ul class="articles">
                            {volist name="artlist" id="v"}
                            <li class="article-entry standard">
                                <h4><a id="choice" href="{:url('index/Article/index',['id'=>$v['art_id']])}">{$v.artname}</a>
                                </h4>
                                <span class="article-meta"><span
                                        class="fa fa-leaf">&nbsp;{$v.colname.colname}</span> <span
                                        class="fa fa-calendar">&nbsp;{$v.arttime}</span>  <span class="fa fa-eye">&nbsp;{$v.views}</span></span>
                                <span class="like-count"  datalove = '{$v.art_id}'>{$v.artlove}</span>
                            </li>
                            {/volist}

                        </ul>
                    </section>

                    <!-- <section class="span4 articles-list">
                        <h3>热门文章</h3>
                        <ul class="articles">
                            {volist name="love" id="v"}

                            <li class="article-entry standard">
                                <h4><a href="{:url('index/article/index',['id'=>$v['art_id']])}">{$v.artname}</a></h4>
                                <span class="article-meta"><span
                                        class="fa fa-leaf">&nbsp;{$v.colname_hot.colname}</span> <span
                                        class="fa fa-calendar">&nbsp;{$v.arttime}</span>  <span class="fa fa-eye">&nbsp;{$v.views}</span></span>
                                <span class="like-count"  datalove = '{$v.art_id}'>{$v.artlove}</span>
                            </li>
                            {/volist}
                        </ul>
                    </section> -->
                </div>
            </div>
            <!-- end of page content -->


            <!-- start of sidebar -->
            <aside class="span4 page-sidebar">

                <section class="widget" style="margin-top: 30px;">
                    <div class="support-widget">
                        <h3 class="title">我是博主啦</h3>
                        <p class="intro">关于我的一些心情和分享的一些小的知识呢，大家也可以积极的讨论...</p>
                    </div>
                </section>

                <section class=" articles-list">
                        <h3>热门文章</h3>
                        <ul class="articles">
                            {volist name="love" id="v"}

                            <li class="article-entry standard">
                                <h4><a href="{:url('index/article/index',['id'=>$v['art_id']])}">{$v.artname}</a></h4>
                                <span class="article-meta"><span
                                        class="fa fa-leaf">&nbsp;{$v.colname_hot.colname}</span> <span
                                        class="fa fa-calendar">&nbsp;{$v.arttime}</span>  <span class="fa fa-eye">&nbsp;{$v.views}</span></span>
                                <span class="like-count"  datalove = '{$v.art_id}'>{$v.artlove}</span>
                            </li>
                            {/volist}
                        </ul>
                    </section>

                <section class="widget">
                    <h3 class="title">友情链接</h3>
                    <div class="tagcloud">
                        {volist name="$links" id="v"}
                        <a href="{$v.linksurl}" target="_blank" class="btn btn-mini">{$v.linksname}</a>
                        {/volist}
                    </div>
                </section>

            </aside>
            <!-- end of sidebar -->
        </div>
    </div>
</div>

<!-- 点赞的ajax -->

<script type="text/javascript">

    $('.like-count').click(function (){
        var info = 'artid' + '=' + $(this).attr('datalove');
        var thisbtn = $(this);
        // alert(info);
        $.ajax({
            type: 'post',
            url: '/index/article/artlove',
            data: info,
            dataType : 'json',
            success : function (data){
                if(data.status){
                    // toastr.success('点赞成功');
                    thisbtn.html(data.love);
                    thisbtn.attr('style','color:blue;');

                    // window.location.reload();

                }else{
                    // toastr.error('点赞失败');
                }
            },
            error : function () {
                alert('执行失败');

            }
        });

    });

</script>



{/block}
<!-- End of Page Container -->

<!-- Start of Footer -->
<footer id="footer-wrapper">
    <div id="footer" class="container">
        <div class="row">

            <div class="span3">
                <section class="widget">
                    <h3 class="title">名言</h3>
                    <div class="textwidget">
                        <p>It does not do to dwell on dreams and forget to live. J.K. Rowling</p>
                        <p>不要依赖梦想而忘记生活。——J·K·罗琳  </p>
                    </div>
                </section>
            </div>

            <div class="span3">
                <section class="widget"><h3 class="title">友情链接</h3>
                    <ul>
                        <li><a href="http://www.baidu.com" target="_blank">百度</a></li>
                        <li><a href="http://www.bilibili.com" target="_blank">B站</a></li>
                        <li><a href="http://www.weibo.com" target="_blank">微博</a></li>
                    </ul>
                </section>
            </div>

            <div class="span3">
                <section class="widget">
                    <h3 class="title">热门话题</h3>
                    <div id="twitter_update_list">
                        <ul>
                            <li>此服务暂不开放。。。</li>
                        </ul>
                    </div>

                </section>
            </div>
            <!--<div class="span3">-->
            <!--<section class="widget">-->
            <!--<h3 class="title">Flickr Photos</h3>-->
            <!--<div class="flickr-photos" id="basicuse">-->
            <!--</div>-->
            <!--</section>-->
            <!--</div>-->
        </div>
    </div>
    <!-- end of #footer -->

    <!-- Footer Bottom -->
    <!--<div id="footer-bottom-wrapper">-->
        <!--<div id="footer-bottom" class="container">-->
            <!--<div class="row">-->
                <!--<div class="span6">-->
                    <!--<p class="copyright">-->

                    <!--</p>-->
                <!--</div>-->
                <!--<div class="span6">-->
                    <!--&lt;!&ndash; Social Navigation &ndash;&gt;-->
                    <!--<ul class="social-nav clearfix">-->
                        <!--<li class="linkedin"><a target="_blank" href="#"></a></li>-->
                        <!--<li class="stumble"><a target="_blank" href="#"></a></li>-->
                        <!--<li class="google"><a target="_blank" href="#"></a></li>-->
                        <!--<li class="deviantart"><a target="_blank" href="#"></a></li>-->
                        <!--<li class="flickr"><a target="_blank" href="#"></a></li>-->
                        <!--<li class="skype"><a target="_blank" href="skype:#?call"></a></li>-->
                        <!--<li class="rss"><a target="_blank" href="#"></a></li>-->
                        <!--<li class="twitter"><a target="_blank" href="#"></a></li>-->
                        <!--<li class="facebook"><a target="_blank" href="#"></a></li>-->
                    <!--</ul>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
    <!-- End of Footer Bottom -->

</footer>
<!-- End of Footer -->

<a href="#top" id="scroll-top"></a>


<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<script src="/static/index/js/toastr.min.js"></script>
<!--<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>-->
<script src="/static/index/js/toastr.min.js"></script>
<script src="/static/index/css/toastr.min.css"></script>
<!-- script -->
<script type='text/javascript' src='/static/index/js/jquery-1.8.3.min.js'></script>
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script src="/static/index/js/jquery.panelslider.min.js"></script>
<script type='text/javascript' src='/static/index/js/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='/static/index/js/prettyphoto/jquery.prettyPhoto.js'></script>
<script type='text/javascript' src='/static/index/js/jflickrfeed.js'></script>
<script type='text/javascript' src='/static/index/js/jquery.liveSearch.js'></script>

<script type='text/javascript' src='/static/index/js/jquery.form.js'></script>

<script type='text/javascript' src='/static/index/js/jquery.validate.min.js'></script>
<script type='text/javascript' src='/static/index/js/custom.js'></script>





<script>
    $('#right-panel-link').panelslider({side: 'right', clickClose: false, duration: 300});
    $('#close-panel-bt').click(function () {
        $.panelslider.close();
    });

    // 头像上传
    function getPicture() {
        $("#photo").click();
    }


    function setImage(docObj, localImagId, imgObjPreview) {
        document.forms["my-header"].submit();
        var f = $('#photo').val();
        f = f.toLowerCase();
        var strRegex = ".bmp|jpg|jpeg$";
        var re = new RegExp(strRegex);
        if (re.test(f.toLowerCase())) {
            var img = 'filename=' + f;
            $.ajax({
                type: 'post',
                url: '/index/index/server',
                data: img,
                dataType: 'json',
                success: function (data) {
                    //                    alert('头像修改成功');
                },
                error: function (data) {
                    //                    alert('头像修改失败');
                }
            });
        }
        else {
            alert("请选择正确格式的图片");
            file = $("#photo");
            file.after(file.clone());
            file.remove();
            return false;
        }
        if (docObj.files && docObj.files[0]) {
            //火狐下，直接设img属性
            //imgObjPreview.style.display = 'block';
            //imgObjPreview.style.width = '140px';
            //imgObjPreview.style.height = '187px';
            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);

        } else {
            //IE下，使用滤镜
            docObj.select();
            var imgSrc = document.selection.createRange().text;
            //必须设置初始大小
            //localImagId.style.width = "140px";
            //localImagId.style.height = "187px";
            //图片异常的捕捉，防止用户修改后缀来伪造图片
            try {
                localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
            } catch (e) {
                alert("您上传的图片格式不正确，请重新选择!");
                return false;
            }
            imgObjPreview.style.display = 'none';
            document.selection.empty();
        }
        return true;
    }


    $(function () {
        //获取class为caname的元素
        $("#useredit").click(function () {
            var td = $('.caname');
            var txt = td.text();
            var input = $("<input type='text' value='" + txt + "'/>");
            td.html(input);
            input.click(function () {
                return false;
            });
            //获取焦点
            input.trigger("focus");
            //文本框失去焦点后提交内容，重新变为文本
            input.blur(function () {
                var newtxt = $(this).val();
                //判断文本有没有修改
                if (newtxt != txt) {
                    td.html(newtxt);
                    $('.postuser').html(newtxt);
                    var newtxt = 'username=' + $(this).val();
                    //                    var caid = $.trim(td.prev().text());
                    //                    alert(newtxt);
                    $.ajax({
                        type: 'post',
                        data: newtxt,
                        url: '/index/index/update',
                        dataType: 'json',
                        success: function (data) {
                            alert('修改成功');
                        },
                        error: function () {
                            alert('修改失败');
                        }
                    });

                } else {
                    td.html(newtxt);
                    $('#postuser').html(newtxt);
                }
            });
        });

        $('.delete').click(function () {
            var ac_id = $(this).attr('data-id');
            if (confirm('您确定要 [ 删 除 ] 该评论吗?')) {
                var obj = $(this).parent('div').parent('div').parent('div').parent('div');
                console.log(obj);
//                obj.remove();
                delAjax(ac_id, obj); // 执行AJAX删除
            }
        });

        $('.delposts').click(function () {
            var ac_id = $(this).attr('data-id');
            if (confirm('您确定要 [ 删 除 ] 该贴吗?')) {
                var obj = $(this).parent('div').parent('div').parent('div').parent('div');
                console.log(obj);
//                obj.remove();
                delpost(ac_id, obj); // 执行AJAX删除
            }
        });


        $('#submit').click(function () {
            var tel = document.regForm.tel.value;
            if (tel.match(/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/) == null) {
                alert("手机号码格式不正确~");
                return false;
            }

            var email = document.regForm.email.value;
            if (email.match(/^[1-9]\d{4,10}@qq\.com$/) == null) {
                alert("邮箱格式不正确~");
                return false;
            }
        });
    });

    //    toastr.options = {
    //        closeButton: true,// 是否显示关闭按钮
    //        progressBar: true,// 实现显示计时条
    //        timeOut: "3000",// 自动关闭时间
    //        positionClass: "toast-bottom-top"// 提示位置
    //        // positionClass: "toast-top-full-width"// 提示位置
    //        // toast-top-full-width 顶端，宽度铺满整个屏幕
    //        // toast-top-right  顶端右边
    //    };

    function delAjax(id, obj) {
        $.ajax({
            type: 'delete',
            url: '/index/index/delete/id/' + id + '.html',
            dataType: 'json',
            success: function (data) {
                if (data.status) {
                    //                    toastr.success(data.info);
                    alert(data.info);
                    obj.remove();
                } else {
                    //                    toastr.success(data.info);
                    alert(data.info);
                }
            },
            error: function () {
                alert('AJAX执行失败!');
            }
        });
    }

    function delpost(id, obj) {
        $.ajax({
            type: 'delete',
            url: '/index/index/delpost/id/' + id + '.html',
            dataType: 'json',
            success: function (data) {
                if (data.status) {
                    //                    toastr.success(data.info);
                    alert(data.info);
                    obj.remove();
                } else {
                    //                    toastr.success(data.info);
                    alert(data.info);
                }
            },
            error: function () {
                alert('AJAX执行失败!');
            }
        });
    }
</script>

<script type="text/javascript">
    $(function() {
        $('.banner').myscroll({
            picElem: $('#move2'), //图片父级
            isArrows: true, //是否创建左右箭头(样式均可自定义调整)
            autoPlay: true, //是否自动播放
            playTime: 2000, //自动播放间隔时间
            playSpeed: 700, //图片切换速度
            effect: 'left' //轮播的改变方式 top(向上) left(向左) fade(淡入淡出)
        });
    })
</script>
</body>
</html>